<template>
  <div class="contentPage">
    <div class="contentM">

      <h2><span>缴费学生查询</span></h2>

      <div class="topSearch">
        <div class="searchBOx">
          <em>输入学生身份证号</em>
          <el-input v-model="searchBox.idCardNum" autocomplete="off" style="width:200px;" size="small"></el-input>
          <em>学校选择</em>
          <el-select v-model="searchBox.schoolId" @change="schoolChange" size="small" placeholder="请选择">
            <!-- <el-option key="" label="全部" value=""></el-option> -->
            <el-option
              v-for="item in schoolList"
              :key="item.schoolId"
              :label="item.schoolName"
              :value="item.schoolId">
            </el-option>
          </el-select>
          <el-button type="primary" @click="getShoolList" size="mini">查询</el-button>
        </div>
      </div>

      <div class="contentN">
        <el-table :data="billList" style="width: 100%">
          <el-table-column type="index" label="序号" width="80"></el-table-column>
          <el-table-column prop="studentName" label="缴费学生"></el-table-column>
          <el-table-column prop="projectName" label="缴费方案"></el-table-column>
          <el-table-column prop="money" label="缴费金额">
            <template slot-scope="scope">
              <span>{{realMoney(scope.row)}}</span>
            </template>
          </el-table-column>
          <el-table-column label="缴费通知单">
            <template slot-scope="scope">
               <el-link @click="goToPay(scope.row)" type="primary">支付</el-link>
            </template>
          </el-table-column>
        </el-table>
      </div>

    </div>

    <el-dialog title="缴费用户认证" :visible.sync="!$store.getters.GetHavePass" :append-to-body="true" width="30%" :close-on-press-escape="false" :close-on-click-modal="false" :show-close="false">
      <el-form :model="form">
        <el-form-item label="请输入手机号" :label-width="formLabelWidth">
          <el-input v-model="form.phoneNum" autocomplete="off" style="width:200px;"></el-input>
          <!-- <el-button type="primary" @click="sentMessage">发送短信</el-button> -->
        </el-form-item>
        <!-- <el-form-item label="请输入验证码" :label-width="formLabelWidth">
          <el-input v-model="form.verificationCode" autocomplete="off" style="width:200px;"></el-input>
        </el-form-item> -->
        <el-form-item :label-width="formLabelWidth">
           <el-button  style="width:100px;" @click="backHome">返回首页</el-button>
           <el-button type="primary" style="width:100px;" @click="makeSure">确定</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
export default {
  // FIXME:数据内容
  data() {
    return {
      ccc:'缴费操作页面',
      dialogVisible:true,
      // studentFrom:this.$route.params.stus,
      formLabelWidth:'120px',
      form:{
        phoneNum:'',
        verificationCode:'',
      },
      searchBox:{
        idCardNum:'',
        schoolId:'',
      },
      schoolList:[],
      billList:[]
    }
  },
  mounted() {
    // console.log(this.$store.getters.GetStudentFrom);
    if(this.$store.getters.GetStudentFrom=="Sign"){
      this.$message({
        message:'您当前是新生缴费',
        type:'info'
      })
    }
    if(this.$store.getters.GetStudentFrom=="Student"){
      this.$message({
        message:'您当前是在校生缴费',
        type:'info'
      })
    }
    this.haveLogin();
  },
  methods: {
    // TODO: 缴费金额兑换
    realMoney(obg){
      var numq = 0;
      numq = (parseFloat(obg.money==null?0:obg.money)*1000-parseFloat(obg.tuitionMoney==null?0:obg.tuitionMoney)*1000)/1000;
      return parseFloat(numq).toFixed(2);
    },
    // 判断是否有验证
    haveLogin:function(){
      this.$store.commit('SetCanBack',true);
      if(!this.$store.getters.GetHaveLogin){
        this.backHome();
      }
    },
    // TODO: 返回首页
    backHome:function(){
      this.$router.push({name:'enterPage'});
    },
    // TODO:发送短信
    sentMessage:function(){
      if(this.form.phoneNum==''||this.form.phoneNum==null||this.form.phoneNum==undefined){
        this.$message({
          message:'请输入手机号',
          type:'success'
        })
        return;
      }
      var url = '/common/send/message';
      var params = {mobile:this.form.phoneNum};
      this.$post(url,params).then(res=>{
        console.log(res);
        if(res.data.status=='SUCCESS'){
          this.$message({
            message:'短信发送成功!请填写验证码',
            type:'success'
          })
        }
      })
    },
    // FIXME:验证验证码
    makeSure:function(){
      if(this.form.phoneNum==''||this.form.phoneNum==null||this.form.phoneNum==undefined){
        this.$message({
          message:'请输入手机号',
          type:'warning'
        })
        return;
      }
      // if(this.form.verificationCode==''||this.form.verificationCode==null||this.form.verificationCode==undefined){
      //   this.$message({
      //     message:'请输入验证码',
      //     type:'warning'
      //   })
      //   return;
      // }
      if(!this.shouji(this.form.phoneNum)){
        this.$notify({
          message:'请输入正确的手机号!',
          type:'warning'
        })
        return;
      }

      this.$store.commit('SetPhoneNum',this.form.phoneNum);
      this.$store.commit('SetHavePass',true);
      // var url = '/common/check/message';
      // var params = {mobile:this.form.phoneNum,code:this.form.verificationCode};
      // this.$post(url,params).then(res=>{
      //   console.log(res);
      //   if(res.data.status=='SUCCESS'){
      //     this.$message({
      //       message:'短信验证成功',
      //       type:'success'
      //     })
      //     this.dialogVisible = false;
      //     this.$store.commit('SetPhoneNum',this.form.phoneNum);
      //     this.$store.commit('SetHavePass',true);
      //   }
      // })
    },
    // TODO: 身份证号验证
    verificationNum:function(num){
      var reg = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/; //验证规则
      return reg.test(num);
    },
    shouji:function(num){
       var reg = /^(0|86|17951)?(13[0-9]|15[0123456789]|18[0-9]|14[57]|17[0-9]|19[0-9])[0-9]{8}$/; //验证规则
      return reg.test(num);
    },
    // TODO:获取学校
    getShoolList:function(){
      if(this.searchBox.idCardNum==''||this.searchBox.idCardNum==null||this.searchBox.idCardNum==undefined){
        this.$message({
          message:'请输入身份证号进行查询!',
          type:'warning'
        })
        return;
      }

      if(!this.verificationNum(this.searchBox.idCardNum)){
        this.$message({
          message:'请输入正确的身份证号!',
          type:'warning'
        })
        return;
      }
      var url = '/api/payment/load/school';
      var params = {studentSource:this.$store.getters.GetStudentFrom,identityCardNumber:this.searchBox.idCardNum}
      this.$post(url,params).then(res=>{
        console.log("获取学校列表",res)
        if(res.data.result.billList.length==0){
          this.$message({
            message:'该生无缴费项目!',
            type:'warning'
          })
        }
        this.schoolList = res.data.result.schoolList;
        this.searchBox.schoolId = res.data.result.schoolList[0].schoolId;
        this.billList = res.data.result.billList;
        this.billList.forEach(e=>{
          if(e.isResidence=="0"||e.isResidence.replace(/\s*/g,"")=="否"){
            e.money = (parseFloat(e.money).toFixed(2)*1000-parseFloat(e.boarderMoney).toFixed(2)*1000)/1000
          }
        })
        if(res.data.result.schoolList.length>1){
          this.getList();
        }
      })
    },
    // TODO: 学校修改
    schoolChange:function(event){
      this.getList();
    },
    panduanSchool:function(obg){


      if(obg.schoolId=="11"){
        this.$confirm('如果显示的缴费金额和学校公示的缴费金额不一致，请联系学校进行处理。', '注意', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.goToPay()
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '取消缴费！'
          });
        });
      }else{
        this.goToPay();
      }
    },
    // FIXME:获取列表
    getList:function(){
      if(this.searchBox.idCardNum==''||this.searchBox.idCardNum==null||this.searchBox.idCardNum==undefined){
        this.$message({
          message:'请输入身份证号进行查询!',
          type:'warning'
        })
        return;
      }

      if(!this.verificationNum(this.searchBox.idCardNum)){
        this.$message({
          message:'请输入正确的身份证号!',
          type:'warning'
        })
        return;
      }

      var url = '/api/payment/load/list';
      var params = {studentSource:this.$store.getters.GetStudentFrom,identityCardNumber:this.searchBox.idCardNum,schoolId:this.searchBox.schoolId}
      this.$post(url,params).then(res=>{
        console.log("获取学费列表",res)
        this.billList = res.data.result;
        this.billList.forEach(e=>{
          if(e.isResidence=="0"||e.isResidence.replace(/\s*/g,"")=="否"){
            e.money = (parseFloat(e.money).toFixed(2)*1000-parseFloat(e.boarderMoney).toFixed(2)*1000)/1000
          }
        })
      })
    },
    // FIXME:去支付页面支付
    goToPay:function(obg){
      var url = '/api/payment/check/special/amount';
      var params = {projectId:obg.projectId,studentId:obg.studentId}
      this.$post(url,params).then(res=>{
        console.log("验证是否有特殊缴费",res);
        if(res.data.result==true){
          if(res.data.result){
            this.$message({
              message:'验证成功,前往支付页面',
              type:'success'
            })
            this.$router.push({name:'payFor',params:{pid:obg.projectId,sid:obg.studentId}});
          }else{

            this.$alert('当前学生需要到学校财务室进行缴费','验证提示',{
              confirmButtonText: '确定',
              callback: action => {
                this.$message({
                  type: 'info',
                  message: `请选择其他缴费项目进行缴费`
                });
              }
            });
          }
        }else{
          this.$alert('当前学生需要到学校财务室进行缴费','验证提示',{
            confirmButtonText: '确定',
            callback: action => {
              this.$message({
                type: 'info',
                message: `请选择其他缴费项目进行缴费`
              });
            }
          });
        }
      })
    }
  },
}
</script>

<style>

</style>
